<template>
  <div style="margin-right: 10px">
    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i>
          {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}销售结构分析-本年{{ dataYear.dataYear }}</span>
        <span>
          <el-radio-group v-model="label" size="small" @change="changeView">
            <el-radio-button v-for="(item, index) in typeArr" :key="index" :label="item.value">{{ item.label
            }}</el-radio-button>
          </el-radio-group>
          <!-- 一级类目：
          <el-select
            v-model="firstLevelColumnList"
            placeholder="一级类目"
            style="margin-left: 5px"
            @change="changeView"
            multiple
          >
            <el-option
              v-for="dict in dict.type.sys_sale_category"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          二级类目：
          <el-select
            v-model="secondLevelColumnList"
            placeholder="二级类目"
            style="margin-left: 5px"
            @change="changeView"
            multiple
          >
            <el-option
              v-for="dict in dict.type.sys_product_secondary"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select> -->
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportI">导出</el-button>
        </span>
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <tableDataVI :tableDataList="tableDataI" />
    </el-card>

    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i>
          {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}销售结构分析-上一年{{ dataYear.lastdataYear }}</span>
        <span>
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportII">导出</el-button>
        </span>
      </div>
      <tableDataVII :tableDataList="tableDataII" />
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i>{{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}
          销售类目综合对比分析</span>
      </div>
      <el-table :data="tableData" ref="table" style="width: 100%" border>
        <el-table-column fixed prop="dataDateUnit" label="" width="110">
        </el-table-column>
        <el-table-column v-for="(month, index) in months" :key="index" :prop="'salesData.' + index" :label="month"
          width="120" align="center" :formatter="(row, col, value) =>
            month.includes('率') ? (value !== null ? `${value}%` : '') : value
            ">
          <template slot-scope="scope">
            <span v-if="scope.row.dataDateUnit == '同比'">
              {{ scope.row.salesData[index] }}%
            </span>

            <span v-else>
              {{ scope.row.salesData[index] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">{{ label + ' ' }}销售额综合对比</div>
          <barLineIII :echartDataSku="IChart" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">{{ label + ' ' }}销售件数综合对比</div>
          <barLine :echartDataSku="IIChart" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">{{ label + ' ' }}访客数综合对比</div>
          <barLine :echartDataSku="IIIChart" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">{{ label + ' ' }}转化率综合对比</div>
          <barLineI :echartDataSku="IVChart" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">{{ label + ' ' }}折扣综合对比</div>
          <barLineI :echartDataSku="VChart" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">{{ label + ' ' }}退货率综合对比</div>
          <barLineI :echartDataSku="VIChart" />
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-card style="margin-bottom: 16px">
      <div slot="header">
        产品上新分析
       
      </div>
      <barLine :echartDataSku="barLineChart" />
      
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        产品品类上新分析
        
      </div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24"
          ><barLine :echartDataSku="categoryNewCountYoyChart" />
        </el-col>
        <el-col :span="8" :xs="24">
          <tableList :tableDataList="categoryNewCountYoyList"
        /></el-col>
      </el-row>
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        新品层级分布
        
      </div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24"
          ><barLine :echartDataSku="operationLevelNewCountYoyChart" />
        </el-col>
        <el-col :span="8" :xs="24">
          
          <el-table
            :data="operationLevelNewCountYoyList"
            style="width: 100%"
            border
            :height="350"
          >
            <el-table-column
              prop="operationLevel"
              label="层级"
              width="125"
            ></el-table-column>
            <el-table-column prop="newQuantity" label="2023年" width="150">
            </el-table-column>
            <el-table-column
              prop="yoyNewQuantity"
              label="2024年"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="newQuantityYoy"
              label="同期比"
              width="100"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="10">
      <el-col :span="12" :xs="24" v-for="(item, i) in xqpjTableData" :key="i">
        <el-card style="margin-bottom: 16px">
          <div slot="header">
            <span
              ><i class="el-icon-collection"></i>
              {{ item.cpbm }}上新品类层级分布</span
            >
          </div>
          <barLine :echartDataSku="item.name" />
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  selectStructureAnalysis,
  selectStructureAnalysisLastYear,
  selectProductSaleRatioTop,
  selectStructureComprehensiveAnalysis,
  selectStructureComprehensiveStatistics,
} from "@/api/productStructure/BiCategoryBasicsDwd";
import LineChart from "./components/LineChart";
import barLine from "./components/barLine";
import barLineIII from "./components/barLineIII";

import barLineI from "./components/barLineI";
import tableList from "./components/table";
import tableDataVI from "./components/tableDataVI";
import tableDataVII from "./components/tableDataVII";
import tableDataV from "./components/tableDataV";

export default {
  dicts: ["sys_sale_category", "sys_product_secondary"],
  props: {
    query: {
      type: Object,
      default: () => { },
    },
    dataYear: {
      type: Object,
      default: () => { },
    },
  },
  components: {
    barLine,
    barLineI,
    barLineIII,
    LineChart,
    tableList,
    tableDataVI,
    tableDataVII,
    tableDataV,
  },
  data() {
    this.chartSettingscompleteRate = {
      // "0.[00]a",
      yAxisType: ["0.[00]", "0.[00]%"],
      showLine: ["转化率"],
      yAxisName: ["访客数", "转化率"],
      axisSite: {
        right: ["转化率"],
      },
    };
    return {
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份
      queryParams: {},
      // 按新老品

      // 按正价/清仓品
      label: "新老品",
      typeArr: [
        { value: "新老品", label: "新老品" },
        { value: "按正价/清仓品", label: "按正价/清仓品" },
        // { value: "近1年", label: "近1年" },
      ],
      firstLevelColumnList: [],
      secondLevelColumnList: [],
      // TOP5TOP5TOP10TOP30TOP50TOP100TOP200TOP300
      topNumber: 10,
      topNumberList: [
        {
          value: 5,
          label: "TOP5",
        },
        {
          value: 10,
          label: "TOP10",
        },
        {
          value: 30,
          label: "TOP30",
        },
        {
          value: 50,
          label: "TOP50",
        },
        {
          value: 100,
          label: "TOP100",
        },
        {
          value: 200,
          label: "TOP200",
        },
        {
          value: 300,
          label: "TOP300",
        },
      ],
      tableDataI: [], // 用于存储转换后的数据
      tableDataII: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份

      operationLevelNewCountYoyChart: {},
      operationLevelNewCountYoyList: [],

      categoryNewCountYoyChart: {},
      categoryNewCountYoyList: [],
      //对比
      barLineChart: {},
      barLineData: [],

      xqpjTableData: [],

      IChart: {},
      IIChart: {},
      IIIChart: {},
      IVChart: {},
      VChart: {},
      VIChart: {},
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.getselectStructureAnalysis();
        this.getselectStructureAnalysisLastYear();
        // this.getselectProductSaleRatioTop();
        this.getselectStructureComprehensiveAnalysis();
        this.getselectStructureComprehensiveStatistics();
      },
      deep: true,
      immediate: true,
    },
    // 监听复选框配置列所有的变化
    // months: {
    //   handler: function (newnew, oldold) {
    //     // console.log(newnew);
    //     // this.showColumn = newnew;
    //     // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
    //     // console.log(new Date());
    //     this.$nextTick(() => {
    //       this.$refs.table.doLayout();
    //       // console.log('渲染完成时间', new Date());
    //     });
    //   },
    //   deep: true,
    //   immediate: true,
    // },

  },
  created() {
    // this.getList();
  },
  methods: {
    getselectStructureComprehensiveStatistics() {
      selectStructureComprehensiveStatistics(this.queryParams).then(
        (response) => {
          let result = [];

          response.forEach((item) => {
            Object.keys(item.keywordProperty).forEach((key) =>
              result.push(key)
            );
          });
          let column = Array.from(new Set(result));
          let columns = ["品类"].concat(column);
          console.log(JSON.stringify(columns));
          this.IChart = {
            columns: columns,
            rows: [],
          };
          this.IIChart = {
            columns: columns,
            rows: [],
          };
          this.IIIChart = {
            columns: columns,
            rows: [],
          };
          this.IVChart = {
            columns: columns,
            rows: [],
          };
          this.VChart = {
            columns: columns,
            rows: [],
          };

          this.VIChart = {
            columns: columns,
            rows: [],
          };
          response.forEach((item) => {
            if (this.queryParams.label == '新老品') {
              if (
                item.dataDateUnit == "新品销售金额" ||
                item.dataDateUnit == "老品销售金额"
              ) {
                this.IChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "新品销售件数" ||
                item.dataDateUnit == "老品销售件数"
              ) {
                this.IIChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "新品商品访客数" ||
                item.dataDateUnit == "老品商品访客数"
              ) {
                this.IIIChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "新品支付转化率" ||
                item.dataDateUnit == "老品支付转化率"
              ) {
                this.IVChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "新品折扣率" ||
                item.dataDateUnit == "老品折扣率"
              ) {
                this.VChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "新品退货率" ||
                item.dataDateUnit == "老品退货率"
              ) {
                this.VIChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
            } else {
              if (
                item.dataDateUnit == "正价销售金额" ||
                item.dataDateUnit == "清仓销售金额"
              ) {
                this.IChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "正价销售件数" ||
                item.dataDateUnit == "清仓销售件数"
              ) {
                this.IIChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "正价商品访客数" ||
                item.dataDateUnit == "清仓商品访客数"
              ) {
                this.IIIChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "正价支付转化率" ||
                item.dataDateUnit == "清仓支付转化率"
              ) {
                this.IVChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "正价折扣率" ||
                item.dataDateUnit == "清仓折扣率"
              ) {
                this.VChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
              if (
                item.dataDateUnit == "正价退货率" ||
                item.dataDateUnit == "清仓退货率"
              ) {
                this.VIChart.rows.push({
                  品类: item.dataDateUnit,
                  ...item.keywordProperty,
                });
              }
            }
          });
        }
      );
    },
    getselectStructureComprehensiveAnalysis() {
      selectStructureComprehensiveAnalysis({
        label: this.label,
        ...this.query,
      }).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.months));

        response.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.tableData.push(row);
        });
        this.$nextTick(() => {
          this.$refs.table.doLayout();
          // console.log('渲染完成时间', new Date());
        });
        return;

        this.barLineChart = {
          columns: ["品类", "访客数", "转化率"],
          rows: [],
        };

        response.forEach((item) => {
          if (item.dataYear != "同期比") {
            this.barLineChart.rows.push({
              品类: item.dataYear,
              访客数: item.visitors ? item.visitors : 0,

              转化率: item.visitorsRatio ? item.visitorsRatio : 0,
            });
          }
        });
      });
    },
    getselectProductSaleRatioTop() {
      selectProductSaleRatioTop(this.query).then((response) => {
        this.barLineData = response;
      });
    },
    changeView() {
      this.queryParams = {
        label: this.label,
        ...this.query,
      };
      this.getselectStructureAnalysis();
      this.getselectStructureAnalysisLastYear();
      this.getselectStructureComprehensiveAnalysis();
      this.getselectStructureComprehensiveStatistics();
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    getselectStructureAnalysis() {
      this.openLoading();
      selectStructureAnalysis({
        // firstLevelColumnList: this.firstLevelColumnList,
        // secondLevelColumnList: this.secondLevelColumnList,
        label: this.label,
        ...this.query,
      }).then((response) => {
        this.$modal.closeLoading();
        this.tableDataI = response;
      });
    },
    getselectStructureAnalysisLastYear() {
      this.queryParams = {
        label: this.label,
        ...this.query,
      };
      selectStructureAnalysisLastYear(this.queryParams).then((response) => {
        this.tableDataII = response;
      });
    },
    handleExportI() {
      this.download(
        "productStructure/BiCategoryBasicsDwd/selectStructureAnalysisExport",
        {
          ...this.queryParams,
        },
        `selectStructureAnalysisExport_${new Date().getTime()}.xlsx`
      );
    },
    handleExportII() {
      this.download(
        "productStructure/BiCategoryBasicsDwd/selectStructureAnalysisLastYearExport",
        {
          ...this.queryParams,
        },
        `selectStructureAnalysisLastYearExport_${new Date().getTime()}.xlsx`
      );
    },

    getcategoryNewCountYoy() {
      categoryNewCountYoy(this.query).then((response) => {
        this.categoryNewCountYoyList = response.categorySaleTendData;
        this.categoryNewCountYoyChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.itemNewTimeYoyList.forEach((item) => {
          this.categoryNewCountYoyChart.rows.push({
            品类: item.category,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getoperationLevelNewCountYoy() {
      operationLevelNewCountYoy(this.query).then((response) => {
        this.operationLevelNewCountYoyList = response;
        this.operationLevelNewCountYoyChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.operationLevelNewCountYoyChart.rows.push({
            品类: item.operationLevel,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getselectProTypeList(category) {
      operationLevelNewCountYoy({ category: category, ...this.query }).then(
        (response) => {
          let obj = {
            columns: ["品类", "上新数量", "上一年上新数量", "同比"],
            rows: [],
          };
          response.forEach((item) => {
            obj.rows.push({
              品类: item.operationLevel,
              上新数量: item.newQuantity,
              上一年上新数量: item.yoyNewQuantity,
              同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
            });
          });
          this.xqpjTableData.forEach((item) => {
            if (item.cpbm == category) {
              item.name = obj;
            }
          });
        }
      );
    },
    getselectCategorySaleTend(property) {
      selectCategorySaleTend(this.query).then((response) => {
        // return;

        let order = { date: [], data: [] };
        order.date = response.categorySaleStatisticsTend.map(
          (item) => item.dataDateUnit
        );
        response.categorySaleStatisticsTend.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[1]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const E = echarts.init(this.$refs[property]);

        E.setOption(option);
      });
    },
  },
};
</script>
